<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>支付方式</title>
    <link href="../css/common.css" rel="stylesheet">
    <link href="../css/base.css" rel="stylesheet">
    <link href="../carts/css/carts.css" rel="stylesheet">
    <link href="css/orderCompletion.css" rel="stylesheet">
</head>
<body>

<header id="header"></header>
<div id="nav-header">
    <div class="show-box" style="width: 1200px;margin: 0 auto">
        <div class="main-head">
            <span class="cart-logo" onclick="location.href='../view/index.html'"></span>

        </div>

        <p class="my-cart"> 支付方式</p>

        <div class="pay-methods">
            <span class="pay-login-name">迷雾森林</span><em>|</em><span>支付方式</span>

        </div>
        <div class="ZZHT-clear"></div>
    </div>

</div>
<section class="ZZHT-container">
    <div class="order-msg">
        <div class="order-wait clearfix">
            <i class="order-ok"></i>
            <ul>
                <li>
                    <div style="color: #494949;font-size: 17px;margin-bottom: 10px">订单已完成 快去付款吧</div>
                    <div style="color: #a9a9a9;margin-bottom: 10px;"> 订单在30分钟有效，超时自动取消 <span> </span></div>
                    <p class="order-fold">订单详情 <span class="icons icon-active"></span></p>
                </li>
            </ul>
            <div style="margin-right: 40px;margin-top: 25px"> 应付总额 :<span
                    style="color: #ea5404;font-weight: bold ;font-size: 18px">{{totalMoney | formatMoney }}</span></div>
        </div>
        <!-- 折叠部分的内容-->
        <div class="zdie">
            <!--<p> <span class="zdie-header">订单编号:</span><span class="zdie-inner" v-for=" o in orderArr">{{o.orderId}}</span></p>-->
            <div class=" item-zdie flex">
                <span class="zdie-header">订单编号:</span>
                <div class="zdie-inner">
                    <p style="margin-bottom: 5px" v-for="o in orderArr">{{o}}</p>

                </div>
            </div>
            <div class=" item-zdie flex">
                <span class="zdie-header">商品名称:</span>
                <div class="zdie-inner">
                    <p style="margin-bottom: 5px" v-for="o in productShowArr">{{o}}</p>

                </div>
            </div>
            <div class="item-zdie"><span class="zdie-header">收货地址:</span><span class="zdie-inner">{{commentProperty.userAddress}}</span>
            </div>
            <div class="item-zdie"><span class="zdie-header">发票抬头:</span><span class="zdie-inner">{{commentProperty.invoiceClient==''||undefined||null?'无抬头信息':commentProperty.invoiceClient}}</span>
            </div>
            <p class="item-zdie"><span class="zdie-header">购买时间:</span><span class="zdie-inner">{{commentProperty.paymentTime}}</span>
            </p>
        </div>
    </div>
    <!-- 支付方式-->
    <div class="pay-moment">
        <p class="pay-moment-header"> 支付方式</p>
        <ul class="pay-moment-body clearfix">
            <li :class="{'border-active':cur==i}" v-for="(m,i) in imgArr" @click="cur=i"><img :src="m.img" alt=""><span
                    v-if="!m.img">{{m.title}}</span></li>

        </ul>
        <div class="line" style="width: 100%"></div>
        <form>
            <div class="pay-detail" v-show="cur==0">
                <p><span class="count-header">现金账户余额</span> <span
                        class="count-money"> {{account.cash| formatMoney}}</span></p>
                <p><span class="count-header">账户积分</span> <span class="count-money">{{account.score}}</span></p>
                <p><span class="count-header">本次扣款</span> <span class="count-money"> {{totalMoney |formatMoney}}</span>
                </p>
                <p><span class="count-header">本次获得积分</span> <span class="count-money"> {{totalScore}}</span></p>
                <p><span class="count-header">交易密码</span><input type="password" v-model="password" required
                                                                maxlength="6" @keyup.enter="cashPay"> <a
                        style="vertical-align: bottom" href="../Usercenter/7-1.html">忘记密码?</a></p>
                <p><span class="count-header"></span> <input type="button" value="确认" @click="cashPay"></p>
            </div>
            <div class="pay-detail" v-show="cur==1">
                <p><span class="count-header">华宝数量</span> <span
                        class="count-money"> {{account.kaiyuan}}</span></p>
                <p><span class="count-header">本次扣款</span> <span class="count-money"> {{returnFloat(totalMoney) |formatMoney}}</span>
                </p>
                <p><span class="count-header">服务费</span> <span class="count-money"> {{(returnFloat(totalMoney *(parseFloat(account.taxRatio)+parseFloat(account.kaiyuanFee)))/100) |formatMoney}}</span>
                </p>
                <!--<p><span class="count-header">本次获得积分</span> <span class="count-money"> {{invoiceClient.defaultScore}}</span></p>-->
                <p><span class="count-header">交易密码</span><input type="password" v-model="password"> <a
                        style="vertical-align: bottom" href="#none">忘记密码?</a></p>
                <p><span class="count-header"></span> <input type="button" value="确认" @click="cashPay"></p>
            </div>
            <div class="pay-detail" v-show="cur==2">
                <p><span class="count-header">华宝数量</span> <span class="count-money"> {{account.huabao}}</span></p>
                <p><span class="count-header">本次扣款</span> <span class="count-money"> {{account.score}}</span></p>
                <p><span class="count-header">服务费</span> <span class="count-money"> {{returnFloat(totalMoney)| formatMoney}}</span>
                </p>
                <!--<p><span class="count-header">本次获得积分</span> <span class="count-money"> {{invoiceClient.defaultScore}}</span></p>-->
                <p><span class="count-header">交易密码</span><input type="password" v-model="password"> <a
                        style="vertical-align: bottom" href="#none">忘记密码?</a></p>
                <p><span class="count-header"></span> <input type="button" value="确认" @click="cashPay"></p>
            </div>
        </form>
    </div>

</section>

<div id="ck1"></div>
<div id="ck3"></div>
<script src="../js/jquery.min.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/vue-resource.min.js"></script>
<script type="text/javascript" src="../js/qrcode.js"></script>
<script type="text/javascript" src="../plugin/layer/layer.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/common_view.js"></script>
<script type="text/javascript" src="../js/ljf_base.js"></script>
<script>
    // console.log( typeof sessionStorage.newOrder);
    new Vue({
        el: ".ZZHT-container",
        data: {
            account: {
                cash: 0,//现金
                huabao: 0, //华宝
                score: 0
            },
            commentProperty: {},
            password: '',
            cur: 0,
            orderArr: [],
            a: [],
            invoiceClient: [],
            productShowArr: [],
            orderArr:[],
            // orderIdArr:[],
            // imgArr:['img/xj.png','img/hb.png','img/wx.png','img/alipay.png','img/kj.png','img/wg.png']
            imgArr: [{
                img: 'img/xj.png',
                title: '现金支付'
            }, {
                img: 'img/hb.png',
                title: '华宝支付'
            }, {
                img: 'img/HBHK.png',
                title: '华宝货款'
            }]

        },
        computed: {
            totalMoney: function () {
                var t = 0;
                this.invoiceClient.forEach(function (v, i) {
                    t += v.totalMoney
                });
                return returnFloat(t)
            },
            totalScore: function () {
                var t = 0;
                this.invoiceClient.forEach(function (v, i) {
                    t += v.score
                });
                return t;
            },
        },
        mounted: function () {
            this.$nextTick(function () {
                this.getCount();
                // this.getProductOrder()
                this.getOrderDetail();
            })
        },

        filters: {
            formatMoney: function (val) {
                return '￥' + val
            },

        },

        methods: {

            //获取地址蓝sktOrdersId
            getUrlParam: function(name, str) {
                var url;
                if (str) {
                    url = str.split("?")[1];
                } else {
                    url = window.location.search.replace("?", "");
                }
                url = url.split("&");
                var ret = {};
                url.forEach(function (o,i) {
                    var d = o.split("=");
                    ret[d[0]] = decodeURI(d[1]);
                });
                if (name)
                    return ret[name];
                else
                    return ret;
            },
            //获取订单详情

            getOrderDetail: function () {
                // console.log(  JSON.parse(sessionStorage.newOrder))
                var param = [], _this = this;
                JSON.parse(this.getUrlParam('newOrder')).forEach(function (v, i) {
                    var obj = {};
                    obj.sktOrdersId = v;
                    param.push(obj)
                });

                _this.$http.get(SURL + 'sktOrders/orderInit', {params: {param: JSON.stringify(param)}}).then(function (res) {
                   // console.log(res)
                    if (res.body.messageCode == 200) {
                        _this.invoiceClient = res.body.entity
                        _this.invoiceClient.forEach(function (v, i) {
                            // console.log(v.goodsName);
                            _this.productShowArr = _this.productShowArr.concat(v.goodsName);
                            _this.orderArr.push(v.orderNo)
                            _this.commentProperty = _this.invoiceClient[0]
                        })

                    }

                })
            },
            //获取现金以及华宝余额
            getCount: function () {
                // console.log(  this.formatDate(new Date()))
                this.$http.get(SURL + '/webAccount/getAccount', {params: {userId: localStorage.userId}}).then(function (res) {
                    // console.log(res)
                    if (res.body.messageCode == '200') {
                        this.account = res.body.entity


                    }
                })
            },
            //请求显示所有商品的orderId

            //现金支付 1:线下现金支付 2 现金账户支付 3开元宝支付 4第三方支付 5混合支付 6开元宝营业额
            pay: function (params) {
                var pattern = /^\d{6}$/, _this = this;
                if (pattern.test(this.password)) {

                    _this.$http.post(SURL + 'webAccount/sale', params, {emulateJSON: true}).then(function (res) {
                        // console.log(res);
                        if (res.body.messageCode == '200') {
                            if (res.body.entity.code == '01') {

                                layer.alert(res.body.entity.msg);
                                setTimeout(function () {
                                    location.href = "./orderCompletionOver.html?orderNo=" + encodeURI(JSON.stringify(_this.orderArr))+"&money=" +encodeURI(_this.totalMoney)+'&order='+encodeURI(_this.getUrlParam('newOrder'));

                                }, 2000)

                            } else {

                                layer.alert(res.body.entity.msg)
                            }

                        }
                    }).catch(function (res) {
                        layer.alert('网络错误')
                    })
                } else {
                    layer.alert('请填写6位正确密码')
                }


            },
            cashPay: function () {
                var params = {
                    userId: localStorage.userId,
                    payPwd: this.password,
                    orderIdList: JSON.parse(this.getUrlParam('newOrder')).toString(),
                    payType: 2,
                    payMoney: this.totalMoney,
                    feeMoney: 0
                };
                this.pay(params)
            },
            huabaoPay: function () {
                var params = {
                    userId: localStorage.userId,
                    payPwd: this.password,
                    orderIdList: JSON.parse(this.getUrlParam('newOrder')).toString(),
                    payType: 3,
                    payMoney: this.totalMoney,
                    feeMoney: 0
                };
                this.pay(params)
            },
            kaiyuan: function () {
                var params = {
                    userId: localStorage.userId,
                    payPwd: this.password,
                    orderIdList: this.orderIdArr.toString(),
                    payType: 6,
                    payMoney: this.invoiceClient.allPrice,
                    feeMoney: (returnFloat(this.invoiceClient.allPrice)) * (parseFloat(this.account.taxRatio) + parseFloat(this.account.kaiyuanFee)) / 100
                };
                this.pay(params)
            },
            restOrder: function () {
                this.$http.get(SURL + 'orders/')
            },
            formatDate: function (date, db) {
                var d = date ? new Date(date) : new Date();
                db = db ? db : false;
                var w = ["日", "一", "二", "三", "四", "五", "六"];
                var t = {
                    "Y": d.getFullYear(),
                    "M": d.getMonth() + 1,
                    "D": d.getDate(),
                    "W": d.getDay(),
                    "h": d.getHours(),
                    "m": d.getMinutes(),
                    "s": d.getSeconds()
                };
                d.setMonth(t.M);
                d.setDate(0);
                t["x"] = d.getDate();
                t["w"] = w[t.W];

                if (db) {
                    $.each(t, function (i, o) {
                        if ((i === "M" || i === "D" || i === "h" || i === "m" || i === "s") && o.toString().length == 1) {
                            t[i] = "0" + o.toString();
                        }
                    });
                }

                return t;
            },
        }

    })

    $(".order-fold").on('click', function () {
        $(this).find('.icons').toggleClass('icon-active')
        $('.zdie').slideToggle("slow");
    })

    $('.pay-methods').find('.pay-login-name').html(localStorage.loginName);

</script>
</body>
</html>